<template>
  <div id="container">
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="查询条件">
            <el-input v-model="formInline.keyword" placeholder="请输入要查询的关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              type="month"
              v-model="formInline.searchMonth"
              value-format="yyyy-MM"
              placeholder="选择一个月">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button type="success" :disabled="formInline.searchMonth.length===0" @click="exportToExcel">导出数据</el-button>
            <el-button type="default" @click="doAddExpense">新增支出</el-button>
          </el-form-item>
        </el-form>

        <el-table
          size="small"
          :data="expenseList"
          border
          :header-cell-style="tableHeaderColor"
          :cell-style="cellContentStyle"
          style="width: 100%">
          <el-table-column
            fixed
            prop="expensesId"
            label="流水号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="expensesTime"
            label="支出时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="expensesNum"
            label="支出金额"
            width="80">
          </el-table-column>
          <el-table-column
            prop="expensesSort"
            label="支出分类"
            width="180">
          </el-table-column>
          <el-table-column
            prop="expensesUserId"
            label="用户编号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="expensesUser"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="expensesRemark"
            label="备注"
            width="300">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="160">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row.expensesId)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="doUpdate(scope.row.expensesId)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="12" :offset="6" style="margin-top: 10px;text-align: center">
            <el-pagination
              :current-page.sync="pager.current"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="pager.size"
              :pager-count="pager.pages"
              layout="total, prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "details",
  data() {
    return {
      formInline: {
        keyword: '',
        searchMonth: ''
      },
      //用户分页对象
      pager: {
        current: 1
      },
      expenseList: []
    }
  },
  mounted() {
    console.log("---------当前登录用户的用户编号是----------")
    console.log(this.$store.state.user.uid)
    this.initCurrentUserExpensePager();
  },
  methods: {

    initCurrentUserExpensePager() {
      let page = {
        uid: this.$store.state.user.uid,
        currentPageNum: this.pager.current
      }
      //发送请求
      this.$store.dispatch('queryUserExpensePageByUid', page).then(resp => {
        if (resp.code === 200) {
          this.pager = resp.data;
          this.expenseList = this.pager.records;
        }
      })
    },

    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'text-align: center;color: #426ab3'
    },
    cellContentStyle({row, column, rowIndex, columnIndex}) {
      return "text-align: center;"
    },
    // 换页
    handleCurrentChange: function (val) {
      console.log("-----点击的当前页号-------")
      console.log(val);
      this.pager.current = val;
      if(this.formInline.searchMonth.length===0){
        this.initCurrentUserExpensePager();
      }else{
        this.doSearch();
      }

    },
    // 每页显示数量
    handleSizeChange: function (val) {
      console.log(val);
    },
    doSearch() {
      console.log('查询....');
      console.log("-----要查询的月份是--------")
      console.log(this.formInline.searchMonth);
      let page = {
        uid: this.$store.state.user.uid,
        realName: this.$store.state.user.realName,
        month: this.formInline.searchMonth,
        currentPageNum: this.pager.current
      };

      this.$store.dispatch('searchUserExpenseMonthView',page).then(resp=>{
        if(resp.code === 200){
          console.log("--------searchUserExpenseMonthView success----------")
          console.log(resp);
          this.pager = resp.data.userExpensesPage;
          this.expenseList = this.pager.records;
        }
      })
    },
    doUpdate(expenseId) {
      //console.log(row);
      this.$router.push({path: `/expense/update?uid=` + expenseId})
    },
    doAddExpense() {
      this.$router.push({path: `/expense/add`})
    },
    handleClick(id){
      this.$router.push({ path: `/expense/details?id=`+id })
    },
    exportToExcel(){
      let page = {
        uid: this.$store.state.user.uid,
        realName: this.$store.state.user.realName,
        month: this.formInline.searchMonth,
        currentPageNum: this.pager.current
      };
      this.$store.dispatch('exportUserExpenseMonthViewToExcel',page).then(resp=>{
        if(resp.code === 200){
          console.log(resp.data);

          this.$message({
            type: 'success',
            message: '数据导出成功！'
          });

          //启定时器，一秒钟后自动下载。
          setTimeout(()=>{
            window.open(resp.data);
          },1000);
        }
      })
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 10px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
